<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		
		
		<style type="text/css">
			.topss{
				width: 50px;
				height: 50px;
				margin-bottom: 10px;
				background: pink;
			}
			
			.mains{
				width: 300px;
				height: 300px;
				background: orange;
			}
		</style>
	</head>
	<body>
		<div class="top">
			第一个
		</div>
		
		<div class="top">
			第二个
		</div>
		
		<div class="top">
			第三个
		</div>
		
		<div id="main">
			main div
		</div>
		
		
		<script type="text/javascript">
			$(function(){
				//1.设置所有的top，宽200 高200 背景色：pink ,下外边距 10px
				$(".top").addClass("topss");
				//2.设置main的div的宽200 高300 背景色：orange
				$("#main").addClass("mains");
				//3.鼠标悬浮在每个top上，main的div显示。鼠标离开，main的div隐藏
				//$("#main").hide();	//默认隐藏
				
				$(".top").mousemove(function(){
					//$("#main").show()
				});
				
				$(".top").mouseout(function(){
					//$("#main").hide();
				});
				//4.鼠标悬浮在每个top上，显示改div的文本
				$(".top").hover(function(){ 
					//鼠标悬浮，main的div里面显示当前悬浮div的文本
					var t = $(this).text();
					$("#main").html(t);
				},function(){
					//鼠标离开。清空main的Div
					$("#main").html("");
				});
				
				
			});
		</script>
	</body>
</html>
